<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eyeDataView</title>
    <script src="./Static/echarts.min.js"></script>
    <script src="./Static/d3.v3.min.js" charset="utf-8"></script>
    <style>
        /* 实现元素随着网页缩放而等比伸缩。 */
        #fa {
            position: relative;
            margin-top: 60px;
            height: 0;
            padding-top: 45%;
        }

        #charts {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;

        }
    </style>
</head>

<body>
    <div id="fa">
        <div id="charts"> </div>
    </div>
    <script>
        //定义几个数组用来放置读取csv文件里的数据
        var nameset = [];
        var numset1 = [];
        var numset2 = [];
        var numset3 = [];
        var numset4 = [];
        //获取CSV文件,逗号分割，设置编码，这样就可以正常显示中文了
        let csv = d3.dsv(",", "data1.csv;charset=gb2312");
        //获取数据
        csv("data1.csv",
            function (error, csvData) {
                if (error) {
                    alert("出现错误")
                } else {
                    // console.log(csvData);
                    // 利用for遍历出读取到的csvData数据
                    for (var i = 0; i < 22; i++) {
                        nameset.push(csvData[i]["name"]);
                        numset1.push(csvData[i]["眼轴长度L"]);
                        numset2.push(csvData[i]["屈光度数L"]);
                        numset3.push(csvData[i]["角膜曲率K1L"]);
                        numset4.push(csvData[i]["晶体厚度L"]);
                    };
                    var chartDom = document.getElementById('charts');
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        // title: {
                        //     text: 'Stacked Line'
                        // },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ["眼轴长度L", "屈光度数L", "角膜曲率K1L", "晶体厚度L",]
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: nameset
                        },
                        //控制x轴实现缩放
                        dataZoom: [
                            {
                                type: 'inside',

                                start: 0,
                                end: 50
                            },
                            {
                                start: 0,
                                end: 10
                            }
                        ],
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '眼轴长度L',
                                type: 'line',
                                stack: 'Total',
                                itemStyle: {
                                    normal: {
                                        color: '#a80000', //改变折线点的颜色
                                        lineStyle: {
                                            color: '#a80000' //改变折线颜色
                                        }
                                    }
                                },
                                data: numset1
                            },
                            {
                                name: '屈光度数L',
                                type: 'line',
                                stack: 'Total',
                                itemStyle: {
                                    normal: {
                                        color: '#ff6f73', //改变折线点的颜色
                                        lineStyle: {
                                            color: '#ff6f73' //改变折线颜色
                                        }
                                    }
                                },
                                data: numset2
                            },
                            {
                                name: '角膜曲率K1L',
                                type: 'line',
                                stack: 'Total',
                                itemStyle: {
                                    normal: {
                                        color: '#ffa438', //改变折线点的颜色
                                        lineStyle: {
                                            color: '#ffa438' //改变折线颜色
                                        }
                                    }
                                },
                                data: numset3
                            },
                            {
                                name: '晶体厚度L',
                                type: 'line',
                                stack: 'Total',
                                itemStyle: {
                                    normal: {
                                        color: '#ffda42', //改变折线点的颜色
                                        lineStyle: {
                                            color: '#ffda42' //改变折线颜色
                                        }
                                    }
                                },
                                data: numset4
                            },
                        ]
                    };
                    option && myChart.setOption(option);
                }
            }
        )
        { };
        console.log(nameset, numset1, numset2);
    </script>
</body>

</html>